<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>贪吃蛇:新世界 - BOSS挑战选择</title>
    
    <!-- Bootstrap CSS -->
    <link href="../plugin/bootstrap-5.3.8-dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link href="../plugin/bootstrap-icons-1.13.1/font/bootstrap-icons.css" rel="stylesheet">
    <!-- BOSS选择页面自定义CSS -->
    <link href="css/boss-choose.css" rel="stylesheet">
</head>
<body class="boss-choose-body">
    <!-- 游戏网格背景 -->
    <div class="game-grid-bg"></div>
    
    <!-- 游戏头部 -->
    <header class="boss-header py-3">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <h1 class="boss-title mb-0">
                        <i class="bi bi-shield-fill me-2"></i>
                        BOSS挑战模式
                    </h1>
                </div>
                <div class="col-md-6 text-md-end">
                    <div class="d-flex justify-content-md-end align-items-center gap-3">
                        <button class="btn btn-outline-light btn-sm" onclick="location.href='game-home.html'">
                            <i class="bi bi-arrow-left me-1"></i>返回主页
                        </button>
                        <button class="btn btn-outline-warning btn-sm">
                            <i class="bi bi-question-circle me-1"></i>帮助
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- 主内容区域 -->
    <main class="container py-5">
        <!-- 难度选择 -->
        <div class="row mb-5">
            <div class="col-12">
                <h2 class="text-white text-center mb-4">选择挑战难度</h2>
                <p class="text-light text-center mb-5">四个难度级别，每个难度都有独特的BOSS等待你的挑战</p>
                
                <div class="row g-4">
                    <!-- 常见难度 -->
                    <div class="col-lg-3 col-md-6">
                        <div class="difficulty-card active" data-difficulty="common">
                            <div class="difficulty-icon bg-success">
                                <i class="bi bi-flag"></i>
                            </div>
                            <h4 class="difficulty-name">常见</h4>
                            <p class="difficulty-desc">适合新手玩家，BOSS难度较低</p>
                            <div class="difficulty-badge">
                                <span class="badge bg-success">★☆☆☆</span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 普通难度 -->
                    <div class="col-lg-3 col-md-6">
                        <div class="difficulty-card" data-difficulty="normal">
                            <div class="difficulty-icon bg-primary">
                                <i class="bi bi-shield"></i>
                            </div>
                            <h4 class="difficulty-name">普通</h4>
                            <p class="difficulty-desc">标准难度，适合有一定经验的玩家</p>
                            <div class="difficulty-badge">
                                <span class="badge bg-primary">★★☆☆</span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 困难难度 -->
                    <div class="col-lg-3 col-md-6">
                        <div class="difficulty-card" data-difficulty="hard">
                            <div class="difficulty-icon bg-warning">
                                <i class="bi bi-shield-check"></i>
                            </div>
                            <h4 class="difficulty-name">困难</h4>
                            <p class="difficulty-desc">高难度挑战，需要精湛的操作技巧</p>
                            <div class="difficulty-badge">
                                <span class="badge bg-warning">★★★☆</span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 地狱难度 -->
                    <div class="col-lg-3 col-md-6">
                        <div class="difficulty-card" data-difficulty="hell">
                            <div class="difficulty-icon bg-danger">
                                <i class="bi bi-shield-exclamation"></i>
                            </div>
                            <h4 class="difficulty-name">地狱</h4>
                            <p class="difficulty-desc">极限挑战，只有最顶尖的玩家才能完成</p>
                            <div class="difficulty-badge">
                                <span class="badge bg-danger">★★★★</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 玩家说明区域 -->
        <div class="row mb-5">
            <div class="col-12">
                <div class="player-instructions bg-dark bg-opacity-75 p-4 rounded-3 border border-warning">
                    <h3 class="text-warning text-center mb-3">
                        <i class="bi bi-info-circle me-2"></i>给玩家的说明
                    </h3>
                    <div class="row">
                        <div class="col-md-6">
                            <ul class="list-unstyled text-light">
                                <li class="mb-2">
                                    <i class="bi bi-check-circle text-success me-2"></i>
                                    玩家是否收到伤害以蛇头为准，蛇身可以随意穿越。
                                </li>
                                <li class="mb-2">
                                    <i class="bi bi-check-circle text-success me-2"></i>
                                    大部分攻击对boss的头部有效，部分对boss蛇身体也有效。
                                </li>
                            </ul>
                        </div>
                        <div class="col-md-6">
                            <ul class="list-unstyled text-light">
                                <li class="mb-2">
                                    <i class="bi bi-check-circle text-success me-2"></i>
                                    不要忘记走位以及拾取道具，适当地时候给予重击。
                                </li>
                                <li class="mb-2">
                                    <i class="bi bi-check-circle text-success me-2"></i>
                                    每个boss有自己的弱点，对弱点造成伤害会造成弱点击破，可以造成额外伤害。
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- BOSS选择区域 -->
        <div class="row">
            <div class="col-12">
                <h2 class="text-white text-center mb-4">选择挑战BOSS</h2>
                <p class="text-light text-center mb-5">每个难度都有多个独特的BOSS，选择你的对手</p>
                
                <!-- 常见难度BOSS -->
                <div class="boss-section active" data-difficulty="common">
                    <h3 class="section-title text-success mb-4">常见难度BOSS</h3>
                    <div class="row g-4">
                        <!-- BOSS 1: 岩石巨蟒 -->
                        <div class="col-xl-4 col-lg-6">
                            <div class="boss-card" data-boss="rock-serpent">
                                <div class="boss-avatar bg-success">
                                    <i class="bi bi-gem"></i>
                                </div>
                                <h4 class="boss-name">岩石巨蟒</h4>
                                <p class="boss-desc">拥有坚硬外壳的巨蟒，移动缓慢但防御力极高</p>
                                <div class="boss-stats">
                                    <div class="stat">
                                        <span class="stat-label">生命值:</span>
                                        <span class="stat-value">1000</span>
                                    </div>
                                    <div class="stat">
                                        <span class="stat-label">攻击力:</span>
                                        <span class="stat-value">20</span>
                                    </div>
                                    <div class="stat">
                                        <span class="stat-label">速度:</span>
                                        <span class="stat-value">慢</span>
                                    </div>
                                </div>
                                <button class="boss-select-btn">
                                    <i class="bi bi-sword me-2"></i>挑战
                                </button>
                            </div>
                        </div>
                        
                        <!-- BOSS 2: 闪电蝰蛇 (敬请期待) -->
                        <div class="col-xl-4 col-lg-6">
                            <div class="boss-card boss-coming-soon" data-boss="lightning-viper">
                                <div class="boss-avatar bg-secondary">
                                    <i class="bi bi-lightning"></i>
                                </div>
                                <h4 class="boss-name">闪电蝰蛇</h4>
                                <p class="boss-desc">速度极快的电属性BOSS，会释放闪电攻击</p>
                                <div class="boss-stats">
                                    <div class="stat">
                                        <span class="stat-label">生命值:</span>
                                        <span class="stat-value">800</span>
                                    </div>
                                    <div class="stat">
                                        <span class="stat-label">攻击力:</span>
                                        <span class="stat-value">30</span>
                                    </div>
                                    <div class="stat">
                                        <span class="stat-label">速度:</span>
                                        <span class="stat-value">极快</span>
                                    </div>
                                </div>
                                <button class="boss-select-btn boss-coming-soon-btn" disabled>
                                    <i class="bi bi-clock me-2"></i>敬请期待
                                </button>
                            </div>
                        </div>
                        
                        <!-- BOSS 3: 毒液王蛇 (敬请期待) -->
                        <div class="col-xl-4 col-lg-6">
                            <div class="boss-card boss-coming-soon" data-boss="venom-king">
                                <div class="boss-avatar bg-secondary">
                                    <i class="bi bi-droplet"></i>
                                </div>
                                <h4 class="boss-name">毒液王蛇</h4>
                                <p class="boss-desc">能够释放毒液攻击，造成持续伤害</p>
                                <div class="boss-stats">
                                    <div class="stat">
                                        <span class="stat-label">生命值:</span>
                                        <span class="stat-value">900</span>
                                    </div>
                                    <div class="stat">
                                        <span class="stat-label">攻击力:</span>
                                        <span class="stat-value">25</span>
                                    </div>
                                    <div class="stat">
                                        <span class="stat-label">速度:</span>
                                        <span class="stat-value">中等</span>
                                    </div>
                                </div>
                                <button class="boss-select-btn boss-coming-soon-btn" disabled>
                                    <i class="bi bi-clock me-2"></i>敬请期待
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 普通难度BOSS -->
                <div class="boss-section" data-difficulty="normal">
                    <h3 class="section-title text-primary mb-4">普通难度BOSS</h3>
                    <div class="row g-4">
                        <!-- BOSS 4: 冰霜巨蟒 (敬请期待) -->
                        <div class="col-xl-4 col-lg-6">
                            <div class="boss-card boss-coming-soon" data-boss="frost-serpent">
                                <div class="boss-avatar bg-secondary">
                                    <i class="bi bi-snow"></i>
                                </div>
                                <h4 class="boss-name">冰霜巨蟒</h4>
                                <p class="boss-desc">能够冻结玩家移动，需要灵活应对</p>
                                <div class="boss-stats">
                                    <div class="stat">
                                        <span class="stat-label">生命值:</span>
                                        <span class="stat-value">1500</span>
                                    </div>
                                    <div class="stat">
                                        <span class="stat-label">攻击力:</span>
                                        <span class="stat-value">35</span>
                                    </div>
                                    <div class="stat">
                                        <span class="stat-label">速度:</span>
                                        <span class="stat-value">中等</span>
                                    </div>
                                </div>
                                <button class="boss-select-btn boss-coming-soon-btn" disabled>
                                    <i class="bi bi-clock me-2"></i>敬请期待
                                </button>
                            </div>
                        </div>
                        
                        <!-- BOSS 5: 火焰魔蛇 (敬请期待) -->
                        <div class="col-xl-4 col-lg-6">
                            <div class="boss-card boss-coming-soon" data-boss="flame-demon">
                                <div class="boss-avatar bg-secondary">
                                    <i class="bi bi-fire"></i>
                                </div>
                                <h4 class="boss-name">火焰魔蛇</h4>
                                <p class="boss-desc">释放火焰弹幕，需要精准的躲避技巧</p>
                                <div class="boss-stats">
                                    <div class="stat">
                                        <span class="stat-label">生命值:</span>
                                        <span class="stat-value">1400</span>
                                    </div>
                                    <div class="stat">
                                        <span class="stat-label">攻击力:</span>
                                        <span class="stat-value">40</span>
                                    </div>
                                    <div class="stat">
                                        <span class="stat-label">速度:</span>
                                        <span class="stat-value">快</span>
                                    </div>
                                </div>
                                <button class="boss-select-btn boss-coming-soon-btn" disabled>
                                    <i class="bi bi-clock me-2"></i>敬请期待
                                </button>
                            </div>
                        </div>
                        
                        <!-- BOSS 6: 暗影蛇王 (敬请期待) -->
                        <div class="col-xl-4 col-lg-6">
                            <div class="boss-card boss-coming-soon" data-boss="shadow-king">
                                <div class="boss-avatar bg-secondary">
                                    <i class="bi bi-moon"></i>
                                </div>
                                <h4 class="boss-name">暗影蛇王</h4>
                                <p class="boss-desc">能够隐身和瞬移，需要预判其行动轨迹</p>
                                <div class="boss-stats">
                                    <div class="stat">
                                        <span class="stat-label">生命值:</span>
                                        <span class="stat-value">1300</span>
                                    </div>
                                    <div class="stat">
                                        <span class="stat-label">攻击力:</span>
                                        <span class="stat-value">45</span>
                                    </div>
                                    <div class="stat">
                                        <span class="stat-label">速度:</span>
                                        <span class="stat-value">极快</span>
                                    </div>
                                </div>
                                <button class="boss-select-btn boss-coming-soon-btn" disabled>
                                    <i class="bi bi-clock me-2"></i>敬请期待
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 困难难度BOSS -->
                <div class="boss-section" data-difficulty="hard">
                    <h3 class="section-title text-warning mb-4">困难难度BOSS</h3>
                    <div class="row g-4">
                        <!-- BOSS 7: 雷霆巨蟒 (敬请期待) -->
                        <div class="col-xl-4 col-lg-6">
                            <div class="boss-card boss-coming-soon" data-boss="thunder-serpent">
                                <div class="boss-avatar bg-secondary">
                                    <i class="bi bi-lightning-charge"></i>
                                </div>
                                <h4 class="boss-name">雷霆巨蟒</h4>
                                <p class="boss-desc">召唤雷电风暴，需要快速反应和精准走位</p>
                                <div class="boss-stats">
                                    <div class="stat">
                                        <span class="stat-label">生命值:</span>
                                        <span class="stat-value">2000</span>
                                    </div>
                                    <div class="stat">
                                        <span class="stat-label">攻击力:</span>
                                        <span class="stat-value">50</span>
                                    </div>
                                    <div class="stat">
                                        <span class="stat-label">速度:</span>
                                        <span class="stat-value">快</span>
                                    </div>
                                </div>
                                <button class="boss-select-btn boss-coming-soon-btn" disabled>
                                    <i class="bi bi-clock me-2"></i>敬请期待
                                </button>
                            </div>
                        </div>
                        
                        <!-- BOSS 8: 熔岩巨蛇 (敬请期待) -->
                        <div class="col-xl-4 col-lg-6">
                            <div class="boss-card boss-coming-soon" data-boss="lava-serpent">
                                <div class="boss-avatar bg-secondary">
                                    <i class="bi bi-volcano"></i>
                                </div>
                                <h4 class="boss-name">熔岩巨蛇</h4>
                                <p class="boss-desc">喷发熔岩弹幕，创造危险区域限制玩家移动</p>
                                <div class="boss-stats">
                                    <div class="stat">
                                        <span class="stat-label">生命值:</span>
                                        <span class="stat-value">2200</span>
                                    </div>
                                    <div class="stat">
                                        <span class="stat-label">攻击力:</span>
                                        <span class="stat-value">55</span>
                                    </div>
                                    <div class="stat">
                                        <span class="stat-label">速度:</span>
                                        <span class="stat-value">中等</span>
                                    </div>
                                </div>
                                <button class="boss-select-btn boss-coming-soon-btn" disabled>
                                    <i class="bi bi-clock me-2"></i>敬请期待
                                </button>
                            </div>
                        </div>
                        
                        <!-- BOSS 9: 时空蛇神 (敬请期待) -->
                        <div class="col-xl-4 col-lg-6">
                            <div class="boss-card boss-coming-soon" data-boss="time-serpent">
                                <div class="boss-avatar bg-secondary">
                                    <i class="bi bi-clock"></i>
                                </div>
                                <h4 class="boss-name">时空蛇神</h4>
                                <p class="boss-desc">操控时间流速，改变游戏节奏，需要极强的适应能力</p>
                                <div class="boss-stats">
                                    <div class="stat">
                                        <span class="stat-label">生命值:</span>
                                        <span class="stat-value">1800</span>
                                    </div>
                                    <div class="stat">
                                        <span class="stat-label">攻击力:</span>
                                        <span class="stat-value">60</span>
                                    </div>
                                    <div class="stat">
                                        <span class="stat-label">速度:</span>
                                        <span class="stat-value">变化</span>
                                    </div>
                                </div>
                                <button class="boss-select-btn boss-coming-soon-btn" disabled>
                                    <i class="bi bi-clock me-2"></i>敬请期待
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 地狱难度BOSS -->
                <div class="boss-section" data-difficulty="hell">
                    <h3 class="section-title text-danger mb-4">地狱难度BOSS</h3>
                    <div class="row g-4">
                        <!-- BOSS 10: 混沌魔蛇 (敬请期待) -->
                        <div class="col-xl-4 col-lg-6">
                            <div class="boss-card boss-coming-soon" data-boss="chaos-serpent">
                                <div class="boss-avatar bg-secondary">
                                    <i class="bi bi-infinity"></i>
                                </div>
                                <h4 class="boss-name">混沌魔蛇</h4>
                                <p class="boss-desc">随机切换攻击模式，无法预测的终极挑战</p>
                                <div class="boss-stats">
                                    <div class="stat">
                                        <span class="stat-label">生命值:</span>
                                        <span class="stat-value">3000</span>
                                    </div>
                                    <div class="stat">
                                        <span class="stat-label">攻击力:</span>
                                        <span class="stat-value">70</span>
                                    </div>
                                    <div class="stat">
                                        <span class="stat-label">速度:</span>
                                        <span class="stat-value">极快</span>
                                    </div>
                                </div>
                                <button class="boss-select-btn boss-coming-soon-btn" disabled>
                                    <i class="bi bi-clock me-2"></i>敬请期待
                                </button>
                            </div>
                        </div>
                        
                        <!-- BOSS 11: 虚空吞噬者 (敬请期待) -->
                        <div class="col-xl-4 col-lg-6">
                            <div class="boss-card boss-coming-soon" data-boss="void-devourer">
                                <div class="boss-avatar bg-secondary">
                                    <i class="bi bi-black-hole"></i>
                                </div>
                                <h4 class="boss-name">虚空吞噬者</h4>
                                <p class="boss-desc">创造黑洞区域，扭曲空间，需要极限操作</p>
                                <div class="boss-stats">
                                    <div class="stat">
                                        <span class="stat-label">生命值:</span>
                                        <span class="stat-value">2800</span>
                                    </div>
                                    <div class="stat">
                                        <span class="stat-label">攻击力:</span>
                                        <span class="stat-value">75</span>
                                    </div>
                                    <div class="stat">
                                        <span class="stat-label">速度:</span>
                                        <span class="stat-value">极快</span>
                                    </div>
                                </div>
                                <button class="boss-select-btn boss-coming-soon-btn" disabled>
                                    <i class="bi bi-clock me-2"></i>敬请期待
                                </button>
                            </div>
                        </div>
                        
                        <!-- BOSS 12: 终焉之蛇 (敬请期待) -->
                        <div class="col-xl-4 col-lg-6">
                            <div class="boss-card boss-coming-soon" data-boss="final-serpent">
                                <div class="boss-avatar bg-secondary">
                                    <i class="bi bi-skull"></i>
                                </div>
                                <h4 class="boss-name">终焉之蛇</h4>
                                <p class="boss-desc">融合所有BOSS能力的终极存在，真正的极限考验</p>
                                <div class="boss-stats">
                                    <div class="stat">
                                        <span class="stat-label">生命值:</span>
                                        <span class="stat-value">3500</span>
                                    </div>
                                    <div class="stat">
                                        <span class="stat-label">攻击力:</span>
                                        <span class="stat-value">80</span>
                                    </div>
                                    <div class="stat">
                                        <span class="stat-label">速度:</span>
                                        <span class="stat-value">极限</span>
                                    </div>
                                </div>
                                <button class="boss-select-btn boss-coming-soon-btn" disabled>
                                    <i class="bi bi-clock me-2"></i>敬请期待
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-dark text-light py-4 mt-5">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <p class="mb-0">
                        <i class="bi bi-shield-fill me-2"></i>
                        BOSS挑战模式 © 2024
                    </p>
                </div>
                <div class="col-md-6 text-md-end">
                    <div class="d-flex justify-content-md-end gap-3">
                        <a href="#" class="text-light"><i class="bi bi-github"></i></a>
                        <a href="#" class="text-light"><i class="bi bi-twitter"></i></a>
                        <a href="#" class="text-light"><i class="bi bi-discord"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <!-- Bootstrap JS -->
    <script src="../plugin/bootstrap-5.3.8-dist/js/bootstrap.bundle.min.js"></script>
    <!-- jQuery -->
    <script src="../plugin/jquery-3.7.1.min.js"></script>
    <!-- BOSS选择页面自定义JS -->
    <script src="js/boss-choose.js"></script>
</body>
</html>